<template>
  <div class="answer-list-box">
    <div
      class="flex-center flex-column-wrap empty-box"
      v-if="!answerData.length"
    >
      <img
        src="//image.zlketang.com/public/news/images/new_official/common/no_history_exam.png"
        alt=""
        class="empty-img"
      />
      <div class="empty-text">暂无答疑记录哦</div>
    </div>
    <div v-else>
      <a
        :href="parseFullPath(getUrl(item))"
        @click.prevent="goToDetail(item)"
        :class="
          `flex-column-wrap answer-list-item no-un-line ${
            isShowBg ? 'item-bg' : ''
          }`
        "
        :style="isShowBg ? '' : 'border-radius: 12px'"
        v-for="(item, index) in answerData"
        :key="index"
      >
        <template v-if="!isMy">
          <span class="answer-list-title d-b-w flex-wrap">
            <span
              v-if="+item.is_essence"
              class="answer-list-title-essence flex-center"
            >
              <span
                class="answer-list-item-point d-b-w"
                v-if="showPoint && item.is_unread > 0"
              ></span>
              精华
            </span>
            <h3 class="d-b-w ell-2 an-content">{{ item.question_info }}</h3>
          </span>
        </template>
        <template v-if="isMy">
          <span class="answer-list-title flex-wrap">
            <span
              class="answer-list-title-status mr6"
              :class="{
                'answer-list-title-status-blue': [1, 3].includes(
                  +item.question_status
                )
              }"
            >
              <span
                class="answer-list-item-point-my d-b"
                v-if="showPoint && +item.is_unread > 0"
              ></span>
              {{ [1, 3].includes(+item.question_status) ? '已解答' : '待解答' }}
            </span>
            <span class="text-ess-2">{{ item.question_info }}</span>
          </span>
        </template>
        <span class="answer-list-teacher flex-center-wrap">
          <img
            :src="parseResourceUrl(item.teacher_avatar)"
            alt=""
            class="answer-list-teacher-img"
          />
          <span class="answer-list-teacher-name">{{ item.teacher_name }}</span>
          <span class="gap"></span>
          <span class="answer-list-other flex-center-wrap flex-justify-between">
            <span v-if="!isMy">{{ item.create_time | dealTime }}</span>
            <span v-if="isMy">
              <span
                class="c-ff7038 mr16"
                v-if="
                  +item.is_evaluate === 0 &&
                    +item.evaluate_effective === 1 &&
                    [3, 4, 5].indexOf(+item.question_status) > -1
                "
              >
                待评价
              </span>
              <span
                class="mr16"
                v-if="
                  +item.evaluate_effective === 2 &&
                    [3, 4, 5].includes(+item.question_status)
                "
              >
                已结束
              </span>
              <span
                class="c-ff7038 mr16"
                v-if="
                  +item.expire_seconds > 0 &&
                    [1, 2].indexOf(+item.question_status) > -1
                "
              >
                {{ handleStatusText(item.expire_seconds) }}
              </span>
              {{ handleTime(item.create_time) }}
            </span>
            <span
              v-if="[1, 2].includes(type)"
              class="cursor-pointer flex-center-wrap m-l-16"
            >
              <span>{{ item.page_view | dealClickCount }}次浏览</span>
            </span>
            <span class="flex-wrap answer-list-action">
              <span
                class="answer-list-collect cursor-pointer flex-center-wrap"
                @click.prevent.stop="giveThumbAndCollect(item, 'collect')"
              >
                <zl-icon
                  v-if="!item.is_collect"
                  icon="icon-shoucang-quseban"
                  :icon-style="{ width: '14px', height: '14px' }"
                ></zl-icon>
                <zl-icon
                  v-else
                  icon="icon-yishoucang1"
                  :icon-style="{ width: '16px', height: '16px' }"
                ></zl-icon>
                <span class="ml6">收藏</span>
              </span>
              <span
                class="cursor-pointer flex-center-wrap"
                @click.prevent.stop="giveThumbAndCollect(item, 'thumb')"
              >
                <zl-icon
                  v-if="!item.is_thumbs"
                  icon="icon-dianzan"
                  :icon-style="{ width: '16px', height: '16px' }"
                ></zl-icon>
                <zl-icon
                  v-else
                  icon="icon-a-dianzanxuanzhong"
                  :icon-style="{
                    width: '16px',
                    height: '16px',
                    color: '#ff5338'
                  }"
                ></zl-icon>
                <span class="ml6">{{ item.thumbs_num }}</span>
              </span>
            </span>
          </span>
        </span>
        <span
          v-if="isShowAnswer"
          class="answer-list-cont"
          :class="!item.reply_info ? 'answer-list-cont-conversation' : ''"
        >
          <span class="text-ess-2">{{ item.reply_info }}</span>
        </span>
      </a>
      <!-- <h1>
                52556
            </h1> -->
      <div
        v-if="pager.total > 10 && !noPager"
        class="tr"
        style="padding: 30px 17px 0 30px;border-top: 1px solid #f2f2f2;"
      >
        <zl-pagination
          @currentChange="currentChange"
          :pager="pager"
        ></zl-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import zlIcon from '@/components/zlIcon.vue'
import pagination from '@/components/pagination.vue'
import { thumbAndCollect } from '@/api/answer_question'
import { loginOut } from '../../api/login'
export default {
  props: {
    'no-pager': {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0
    },
    answerData: {
      type: Array,
      default: () => []
    },
    pager: {
      type: Object,
      default: () => {
        return {
          page: 1,
          limit: 10,
          total: 0
        }
      }
    },
    showPoint: {
      type: Boolean,
      default: false
    },
    isMy: {
      type: Boolean,
      default: false
    },
    // 是否显示老师回答
    isShowAnswer: {
      type: Boolean,
      default: true
    },
    // 是否显示悬停背景
    isShowBg: {
      type: Boolean,
      default: true
    }
  },
  components: {
    'zl-icon': zlIcon,
    'zl-pagination': pagination
  },
  filters: {
    dealClickCount: number => {
      if (isNaN(number) || !number) {
        return '0'
      }
      if (+number < 1000) {
        return number
      }
      return (+number / 1000).toFixed(1) + 'k'
    },
    dealTime(val) {
      if (!val) return ''
      let arr = val.split(':')
      return arr[0] + ':' + arr[1]
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      //点赞收藏的节流
      thumbMap: {},
      collectMap: {},
      //防止重复点击
      isClickDetail: false
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    handleStatusText(seconds) {
      if (seconds > 600) {
        return `${(+seconds / 3600).toFixed(1)}小时后提问将被关闭`
      }
      return `${(+seconds / 60).toFixed(1)}分钟后提问将被关闭`
    },
    handleTime(createTime) {
      if (!createTime) return
      createTime = this.timeFormat(
        'Y-m-d',
        new Date(createTime.replace(/-/g, '/')).getTime() / 1000
      )
      return `${createTime + '  提问'}`
    },
    //分页函数
    async currentChange() {
      this.$emit('pagerFun', { page: this.pager.page })
      await this.$nextTick()
      // 滚动回顶部
      window.scrollTo(0, 0)
    },
    getUrl(item) {
      let mapId = item.map_id || item.object_id
      return '/dayi/' + mapId + item.s_p_t + '.html'
    },
    //查看问题详情
    goToDetail(item) {
      this.zlaBtn = {
        key_name: ' 查看答疑',
        key_content: '查看答疑'
      }
      if (this.isClickDetail) return
      if (!this.isClickDetail) this.isClickDetail = true
      //帖子答疑
      let params = {
        is_essence: item.is_essence
      }
      if (+item.is_unread > 0) params.is_unread = 1
      let mapId = item.map_id || item.object_id
      let url = '/dayi/' + mapId + item.s_p_t + '.html'
      '/dayi/' + mapId + item.s_p_t + '.html'
      //s_p_t只会取值1（帖子答疑），2（对话答疑），因服务端渲染，不允许代参，代参不利于SEO
      this.goTo(url, {
        query: params,
        target: '_blank',
        watch: true
      })
      setTimeout(() => {
        this.isClickDetail = false
      }, 300)
    },
    //点赞和收藏
    giveThumbAndCollect(item, type) {
      // if((type === 'collect' && this.collectMap[item.object_id]) || (type === 'thumb' && this.thumbMap[item.object_id])) return

      let status = 1
      if (type === 'collect') {
        this.collectMap[item.object_id] = true
        status = item.is_collect ? 2 : 1
        item.is_collect = +item.is_collect === 1 ? 0 : 1
      } else {
        this.thumbMap[item.object_id] = true
        status = item.is_thumbs ? 2 : 1
        item.is_thumbs = +item.is_thumbs === 1 ? 0 : 1
        if (+item.is_thumbs === 1) {
          item.thumbs_num++
        } else {
          item.thumbs_num--
        }
      }
      let params = {
        object_id: item.object_id,
        handel_type: type,
        handel_status: status
      }

      thumbAndCollect(params)
        .then(() => {
          setTimeout(() => {
            if (type === 'collect') {
              delete this.collectMap[item.object_id]
            } else {
              delete this.thumbMap[item.object_id]
            }
          }, 1000)
        })
        .catch(() => {
          if (type === 'collect') {
            item.is_collect = +item.is_collect === 1 ? 0 : 1
            delete this.collectMap[item.object_id]
          } else {
            item.is_thumbs = +item.is_thumbs === 1 ? 0 : 1
            if (+item.is_thumbs === 1) {
              item.thumbs_num--
            } else {
              item.thumbs_num++
            }
            delete this.thumbMap[item.object_id]
          }
          this.$message.error('操作失败，请重试~')
        })
    }
  }
}
</script>

<style scoped>
.mr6 {
  margin-right: 6px;
}

.c-ff7038 {
  color: #ff7038;
}

.answer-list-box {
  background-color: #fff;
  margin: 0 -30px;
}

.answer-list-item {
  position: relative;
  padding: 30px;
  cursor: pointer;
}

.answer-list-item:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  width: 93%;
  border-bottom: 1px solid #f2f2f2;
}

.answer-list-item:nth-last-of-type(1):after {
  border-bottom: 0;
}

.item-bg:hover {
  background: #f7f9fc;
}

.answer-list-item:nth-last-of-type(1) {
  margin-bottom: 0;
  border-bottom: none;
}

.answer-list-item-point {
  position: absolute;
  left: -5px;
  top: -7px;
  width: 10px;
  height: 10px;
  background-color: #ff5338;
  border-radius: 50%;
}

.answer-list-item-point-my {
  position: absolute;
  left: -5px;
  top: -7px;
  width: 10px;
  height: 10px;
  background-color: #ff5338;
  border-radius: 50%;
}

.answer-list-title {
  height: auto;
  line-height: 28px;
  margin-bottom: 16px;
  white-space: pre-wrap;
  font-size: 16px;
  color: #383838;
}

.answer-list-title:hover {
  text-decoration: underline;
}

.answer-list-title-essence {
  position: relative;
  margin-top: 5px;
  margin-right: 6px;
  height: 19px;
  padding: 1px 6px;
  margin-left: 4px;
  background-color: #fff1eb;
  font-size: 12px;
  color: #ff7038;
  border-radius: 8px 0px 8px 0px;
  white-space: nowrap;
}

.answer-list-title-status {
  position: relative;
  flex-shrink: 0;
  margin-top: 5px;
  width: 48px;
  height: 19px;
  font-size: 12px;
  color: #ff7038;
  text-align: center;
  line-height: 19px;
  background: #fff1eb;
  border-radius: 8px 0px 8px 0px;
  white-space: nowrap;
}

.answer-list-title-status-blue {
  color: #3480ff;
  background: #e0ecff;
}

.answer-list-teacher {
  font-size: 14px;
  color: #999999;
}

.answer-list-teacher-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.answer-list-teacher-name {
  line-height: 20px;
  margin-left: 6px;
}

.answer-list-cont {
  line-height: 24px;
  padding: 16px 20px;
  margin: 10px 0 0 0;
  background-color: #f7f7f7;
  font-size: 14px;
  color: #666666;
  white-space: pre-wrap;
  border-radius: 8px;
}

.answer-list-cont-conversation {
  background-color: #fff;
}

.answer-list-other {
  font-size: 12px;
  color: #999999;
}

.answer-list-collect {
  margin-right: 20px;
}

.empty-box {
  padding: 56px 0 134px 0;
}

.empty-img {
  width: 196px;
  height: 126px;
}

.empty-text {
  line-height: 22px;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
}

.cursor-pointer {
  cursor: pointer;
}

.no-un-line {
  text-decoration: none;
}

.m-l-16 {
  margin-left: 16px;
}

.d-b-w {
  word-wrap: break-word;
}

.an-content {
  max-height: 56px;
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  line-height: 28px;
}

.gap {
  margin: 0 10px;
  width: 1px;
  height: 10px;
  background: #d9d9d9;
}

.answer-list-action {
  position: absolute;
  right: 30px;
}
</style>
